<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				background-image:url(image/336.jpg);/*背景图*/
				background-size: 100% 150%;/*背景大小*/
				background-attachment: fixed;/*背景固定*/
				height: 100%;/*高*/
				width: 100%;/*宽*/
			}
			hr{
				height: 2px;
				background-color:skyblue;
			}
			#left{
				float: left;/*左浮动*/
				background-color:blanchedalmond;
				height: 150%;
				width: 300px;
				margin-left: 2%;/*左外边距*/
			}
			#right{
				float: left;/*左浮动*/
				height:70%;
				width: 58%;
			}
			table{
				width: 100%;
				margin: 10% 7%;/*外边距*/
				padding-left: 10%;
				float: left;
				background-color: white;
				opacity: 0.8;/*透明*/
			}
			td{
				height: 100px;
				width: 300px;
				font-size: 20px;/*字体大小*/
				font-weight: 400;/*字体粗*/
			}
			div p{
				font-size: 20px;
				color:white;/*字体白色*/
				font-weight: 600;
				padding-left: 7%;/*左内边距*/
			}


			#intro{
				width: 35px;
				font-size: 35px;
				color:rosybrown;
				font-weight: 600;
				margin: 10% auto;/*居中*/
			}
			/*------------------------*/
			#all{
				width: 100%;
				height: 100%;
			}
			#ni{
				height: 400px;
				width: 980px;
				overflow: hidden;/*隐藏溢出*/
			}
			li{
				float: left;
				list-style: none;/*去除样式*/
				width: 80px;
				transition:all 1.5s;/*过渡*/
			}
			li span{
				color: gray;
				width: 100px;
				text-align: center;/*居中*/
				font-size: 20px;
			}
			li:hover li{
				width: 80px;
			}
			li:hover{
				width: 700px;
			}
			li img{
				width: 700px;
				height: 420px;				
			}
			#phot{
				background-color: black;/*背景色*/
				width: 150px;
				height: 180px;
				margin:30% auto;
			}
			#phot img{
				width: 150px;
				height: 180px;
			}
			#dee{
				background-color: #FFFFFF;
				width: 100%;
				height: 100%;
				margin-left: -40px;
				overflow: hidden;/*隐藏溢出*/
			}	
			#da{
				height: 100%;
				width:1400px;
			}
		</style>
	</head>
	<body>
	<div id="all">
		<div>
			<p>自&emsp;我&emsp;介&emsp;绍</p>
		</div>
		<hr/>
	<div id="da">
		<div id="left">
			<div id="phot"><img src="image/666.jpg" alt="照片"></div><!-- 图片 -->
			<div id="intro">数据式的自我介绍 · 自荐</div>
		</div>
		<div id="right">
			<table>
				<tr>
					<td>姓名:江俊波</td><!-- 文字 -->
					<td>班级:计科209班</td>
				</tr>
				<tr>
					<td>性别:男</td>
					<td>学号:20104010904</td>
				</tr>
				<tr>
					<td>年龄:21</td>
					<td>兴趣爱好如下：</td>
				</tr>
			</table>
		</div>
		<div id="ni">
			<div id="dee">
			<ul>
				<li>
					<span>&nbsp;阅读|</span>
					<img src="image/44.webp">
				</li>
			</ul>
			<ul>
				<li>
					<span>&nbsp;动漫|</span>
					<img src="image/33.jpeg">
				</li>
			</ul>
			<ul>
				<li>
					<span>&nbsp;计科|</span>
					<img src="image/22.webp">
				</li>
			</ul>
			<ul>
				<li>
					<span>&nbsp;跑步|</span>
					<img src="image/11.jpg">
				</li>
			</ul>
		</div>
		</div>
	</div>	
	
	</div>
	</body>
</html>
